
// 上述介绍的组件间通信的方式，传递是数据内容本身， 有时父子组件间除了传递数据
// 外，还可以传递数据的结构， 这时需要用插槽来实现， 因此插槽也是父子组件间通信的一
// 种方式。

import './assets/main.css'

import { createApp } from 'vue'
// 引入第三方库mitt事件总件传参
import mitt from 'mitt'

// 引入axios和mockjs
import axios from 'axios';
import Mock from 'mockjs';

// 创建一个Mock服务，用于拦截请求
Mock.mock('/api/user', 'get', {
    'code': 200,
    'message': '成功',
    'data|1-10': [{
        'id|+1': 1,
        'name': '@cname',
        'age|18-60': 1,
        'email': '@email'
    }]
});

Mock.mock('/api/login', 'post', (options) => {
    const { username, password } = JSON.parse(options.body);
    const code = username === 'admin' && password === '123456' ? 200 : 401;
    const message = code === 200 ? '登录成功' : '用户名或密码错误';
    const data = code === 200 ? [{ token: '@guid', username: username }] : [];

    return {
        code: code,
        message: message,
        data: data
    };
});

import App from './App.vue'
const app = createApp(App)

//在应用实例上增加公共属性 $ bus 标记事件总线
app.provide('$bus', mitt())//事件总线 mitt()提供给整个应用
// 将Axios挂载到Vue应用的原型上，以便在组件中通过this.$axios访问
app.config.globalProperties.$axios = axios;
app.mount('#app')
